<template>
    <div class='slideNav'>
        <mt-swipe :auto="0">
            <mt-swipe-item>
                <ul class='slidelist'>
                    <router-link to="/list">
                    <li :key='index' v-for='(item ,index) in slidenavlist1'>
                                                             <!-- "b7f432619fb21a40b05cd25d11eca02djpeg" -->
                             <!-- https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/ -->
                           <!-- <img src="getTruestr(item.image_hash)" alt=''/>    -->
                        <img :src='item.oUrl' alt=''/> 
                        <p>{{ item.name }}</p>
                    </li>
                     </router-link>
                </ul>
            </mt-swipe-item>
            <mt-swipe-item>
                <ul class='slidelist'>
                    <li :key='index' v-for='(item ,index) in slidenavlist2'>
                                                             <!-- "b7f432619fb21a40b05cd25d11eca02djpeg" -->
                             <!-- https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/ -->
                           <!-- <img src="getTruestr(item.image_hash)" alt=''/>    -->
                        <img :src='item.oUrl' alt=''/> 
                        <p>{{ item.name }}</p>
                    </li>
                    <li></li>
                </ul>
            </mt-swipe-item>
        </mt-swipe>
        
    </div>
</template>

<script>
// import { mapState } from 'vuex'
import axios from 'axios'
export default {
    name:'slidenav',
    data(){
        return {
            slidenavlist1:[],
            slidenavlist2:[],
        }
    },
    created(){
        var that=this;
        if(window.localStorage.slidenavlist1 && window.localStorage.slidenavlist2){
            this.slidenavlist1 = JSON.parse(window.localStorage.slidenavlist1);
            this.slidenavlist2 = JSON.parse(window.localStorage.slidenavlist2);
        }else{
            axios.get('http://localhost:3000/slideshow',{
                params:{
                    // latitude:22.58846,
                    // longitude:113.97459,
                    // templates:main_template,
                }
            }).then(function(res){
                if(res){
                    
                    var odata=res.data[0].entries;
                    // console.log(odata);
                    var arr=[];
                    for(var i=0;i<odata.length;i++){
                        var obj={};
                        obj.name=odata[i].name;

                        var a = odata[i].image_hash.split('')
                        a.splice(1,0,'/');
                        a.splice(4,0,'/');
                        obj.oUrl = 'https://fuss10.elemecdn.com/'+a.join('')+'.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/';
                        arr.push(obj);
                    }

                    that.slidenavlist1=arr.slice(0,8);
                    that.slidenavlist2=arr.slice(8);
                    // console.log(that.slidenavlist1);
                    // console.log(that.slidenavlist2);
                    window.localStorage.slidenavlist1 = JSON.stringify(arr.slice(0,8));
                    window.localStorage.slidenavlist2 = JSON.stringify(arr.slice(8));
                }
            }).catch(function(err){
                console.log(err)
            })
        }
        
    },
    computed:{
        getTruestr(str){

            // b7f432619fb21a40b05cd25d11eca02djpeg
            // https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/
            var a=str.split('');
            a.splice(1,0,'/');
            a.splice(4,0,'/')
            // console.log('https://fuss10.elemecdn.com/'+a.join('')+'.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/');
            // return 'https://fuss10.elemecdn.com/'+a.join('')+'.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/'
            return a.join('')
        },
    }
}
</script>


<style lang="scss" scoped>
    @import '../../../static/hotcss/px2rem.scss';
    .slideNav{
        width: 100%;
        height: px2rem(354);
        background-color: #FFF;
    }
    .slidelist{
        width: 100%;
        height: px2rem(354);
        // overflow: hidden;
        // display: flex;
        // flex-wrap: wrap;
        // align-items: flex-start;
        li{
            float: left;
            width: 25%;
            height: px2rem(150);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            img{
                width: px2rem(90);
                height: px2rem(90);
            }
            p{
                font-size: px2rem(26);
                color: #666;
            }
        }
    }
    // .mint-swipe-indicators .mint-swipe-indicator{
    //     background-color: #000;
    //     opacity: 0.6;
    // }
    // .mint-swipe-items-wrap .mint-swipe-indicators .is-active{
    //     background-color: #000;
    //     opacity: 1;
    // }
    // .is-active{
    //     background-color: red;
    // }
    .mint-swipe-indicators .mint-swipe-indicator{
        opacity: 0.5;
    }
    
</style>
